<template>
    <!-- 最大盒子 -->
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'发薪详情'" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'#ffffff'" :titleStyle="{  color:'$uni-text-color',fontSize:'32rpx',fontWeight:'600' }">
        <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 56) + 'px'}">    
            <view class="details" v-if="details">
                <fui-overflow-hidden class="title" :text="details.schedule.title" :rows="2"></fui-overflow-hidden>
                <view class="state">排班状态：<view class="blue">
                    {{ details.state ==0?'待开始':details.state ==1?'进行中':details.state ==2?'已结束':details.state ==3?'已终止':details.state ==4?'已作废':'全部'}}

                </view></view>
                <view class="time">班次时间：<view class="blue">{{ details.date }}  ({{ details.schedule.start_time }} - {{ details.schedule.end_time }})</view></view>
            </view>
            <scroll-view scroll-y class="area scroll_list_item"  @scrolltolower='listScrolltolower' show-scrollbar="true" :refresher-enabled="isOpenRefresh"
              :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white"
              @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
              @refresherabort="onAbort" @scroll="onScroll" v-if="payrollDetailList.length">
              
                <view v-for="(i,index) of payrollDetailList" :key="index">
                    <fui-sticky>
                    <view class="taxon fui-header">
                        <view class="left">
                            <view class="icon_image">
                                <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_zhizhao.png`" mode="scaleToFill"
                                        v-if="i.source == 1" />
                                        <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_dailiren.png`" mode="scaleToFill"
                                        v-else />
                            </view>
                            <view class="text">{{ i.title }}</view>
                        </view>
                        <view class="right" v-if="i.source == 2">分佣：<text>￥{{ i.agent_commission_text }}</text>
                        </view>
                    </view>
                </fui-sticky>
                    <view class="employee_item" v-for="(item,index) in i.list" :key="index">
                        <view class="big_box">
                            <view class="left">
                                <view class="image">
                                    <image :src="`${baseUrl}`+item.user.avatar" mode="scaleToFill"/>
                                </view>
                                <view class="center_box">
                                    <view class="name">{{item.user.nickname}}</view>
                                    <view class="id_gender">{{item.user.authentication.identity_id}}  {{item.user.authentication.gender == 0?'女':'男'}}</view>
                                    <view class="id_gender">{{ formatDatetime(item.createtime)}} </view>
                                </view>
                                
                            </view>
                            <view class="dis_box">
                                <view class="view_details" >￥{{item.money}}</view>
                                <view :class="
                                    item.status == 0 ? 'blue' :
                                    item.status == 1 ? 'green' :
                                    item.status == 2 ? 'red' :
                                    item.status == 3 ? 'yellow' :
                                    ''">
                                    {{ 
                                        item.status == 0 ? '待转账' :
                                        item.status == 1 ? '已转账' :
                                        item.status == 2 ? '失败' :
                                        item.status == 3 ? '部分成功' :
                                        ''
                                    }}
                                </view>
                            </view>
                        </view>
                        <view class="fail_remark" v-if="item.status == 2">
                            <view class="memo red">{{ item.fail_reason }}</view>
                        </view>
                        
                    </view>
                    
                </view>

                <!-- 正在加载组件 -->
                <view >
                    <s-loadmore-gather :current_page="listPage" :last_page="listlast_page" ref="loadmoreRef"></s-loadmore-gather>
                </view>

            </scroll-view>
            <u-empty  v-else mode="list"  icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty>
        </view>
    </s-layout>
</template>

<script setup>
    import { baseUrl } from '@/sheep/config';
    import sheep from '@/sheep';
    import { onShow,onLoad } from "@dcloudio/uni-app";
    import { ref } from 'vue';
    const { safeAreaInsets } = uni.getSystemInfoSync()
    import { formatDatetime } from '@/utils/fn.js';
    const ids = ref()
    onLoad((option) => {
        ids.value = option.id
        getScheduleUserIndex()
    })
    //请求数据
    const payrollDetailList = ref([])
//数据请求
    const listPage = ref()
    const listlast_page = ref();
    const listpagenumber = ref(1);
    const details = ref()
    const getScheduleUserIndex = async () => {
    let params = {
        ids:ids.value,
        page: listpagenumber.value,
    };
    const res = await sheep.$api.project.getRemitUserlistRemitid(params);

     details.value = res.data.head
    payrollDetailList.value = [...payrollDetailList.value, ...res?.data.list.rows];
    listPage.value = res?.data.list.current_page
    listlast_page.value = res?.data.list.last_page

    }
// 滚动触底事件 + 分页处理
const loadmoreRef = ref()
//滚动触底
const listScrolltolower = () => {
loadmoreRef.value.PopupScrolltolower()
    if (listPage.value < listlast_page.value) {
    listpagenumber.value += 1;
    } else {

        return;
    }
    getScheduleUserIndex();
};
    
// 页面下拉刷新
const freshing = ref(false)
const triggered = ref(false)
const isOpenRefresh = ref(true)  // 是否开启下拉
// 自定义下拉刷新控件被下拉
const onPulling = (e) => {
  if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
  triggered.value = true;
}
// 自定义下拉刷新被触发
const onRefresh = () => {
  if (freshing.value) return;
  freshing.value = true;
  setTimeout(() => {
      listpagenumber.value = 1;
      payrollDetailList.value = []
      triggered.value = false;
      freshing.value = false;
      getScheduleUserIndex();
  }, 500);
}
// 自定义下拉刷新被复位
const onRestore = () => {
  triggered.value = 'restore'; // 需要重置
  // console.log("onRestore");
}
// 自定义下拉刷新被中止
const onAbort = () => {
  // console.log("onAbort");
}

</script>

<style lang="scss" scoped>
    // 版心
    .area {
        width: calc(100% - 108rpx);
        margin: 0 20rpx;
    }


    .scroll_list_item {
        height: 65vh;
        border-radius: 8px;
        background-color: #ffffff;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        padding: 30rpx 38rpx 56rpx 30rpx;
        .taxon {
            display: flex;
            align-items: center;
            // margin-bottom: 30rpx;
            justify-content: space-between;
            .left {
                display: flex;
                align-items: center;
            
            }
            .dis_box {
                display: flex;
                align-items: center;
            }

    .right {
    
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-26;

        text {
            color: #0038F7;
        }
    }
            .icon_image {
                width: 28rpx;
                height: 28rpx;
                border-radius: 50%;
                margin-right: 12rpx;
                display: flex;
                align-items: center;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius:50%;
                }
            }
            .text {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: 500;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
            }
        }
        .employee_item {
            // display: flex;
            // align-items: center;
            padding: 20rpx 0 30rpx 0; 
            border-bottom:1rpx solid #efefef;
            font-size: 30rpx;
            &:last-child{
                border-bottom: none;
            }
            .big_box {

                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .fail_remark {
                
                .memo {
                    text-align: left;
                    font-weight: 500;
                    font-size: 26rpx;
                    border-radius: 8px;
                    background-color: #F9FAFF;
                    padding: 30rpx;
                    margin-top: 20rpx;
                }
            }
            .left {
                display: flex;
                align-items: center;
            }
            .view_details {
                font-family: PingFangSC;
                color: #FF6600;
                font-weight: 500;
                font-size: 30rpx;
            }
            .image {
                width: 104rpx;
                height: 104rpx;
                display: flex;
                align-items: center;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .center_box {
                margin-left: 30rpx;
                .name {
                    font-family: PingFangSC;
                    color: $uni-text-color;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    margin-bottom: 4rpx;
                }
                .id_gender {
                    color: #999999;
                    font-weight: 500;
                    font-size: $uni-font-size-sm;
                    height: 40rpx;
                    display: flex;
                    align-items: center;
                }
            }
        }

    }

    .blue {
        color: $uni-color-primary;
    }
    .orange {
        color: #FF6600;
    }
   
.details{
    width: calc(100% - 40rpx);
    margin: 0rpx auto 20rpx auto;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
    .title{
        padding: 40rpx 30rpx 0; 
            display: flex;
            align-items: center;
            color: #333333;
            font-weight: 500;
            font-size: 36rpx;
    }
    .blue{
        color: #0038F7;
        font-weight: 500;
        font-size: 24rpx;
    }
    .state{
        padding-left: 30rpx;
        height: 50rpx;
        font-weight: 500;
        font-size: 24rpx;
            display: flex;
            margin-top: 10rpx;
          
            align-items: center;
    }
    .time{
        font-weight: 500;
        font-size: 24rpx;
        padding-left: 30rpx;
        height: 50rpx;
            display: flex;
            margin-top: 10rpx;
            padding-bottom: 20rpx;
            align-items: center;
           
        }
}
.fui-header{
    background: #fff;
    padding-bottom: 30rpx;
}

.yellow{
    color: #FF8F00 !important; 
    font-size: 26rpx;
    text-align: right;
}
.red{
    color: #FF0000 !important; 
    font-size: 26rpx;
    text-align: right;
}
.blue{
    color: #0038F7 !important; 
    font-size: 26rpx;
    text-align: right;
}
.green {
    color: #006600 !important;
    font-size: 26rpx;
    text-align: right;
}
</style>